<template>
	<view class="qb">
	<view class="card-section">
	<view class="smart-panel-title1">泉州风光</view>
	<view style="padding-top:10px;">
				<swiper circular indicator-dots="true":autoplay="true":interval="700":duration="500">
					<swiper-item style="background-color: aqua;">
						<image src="/static/city1.png" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.jpg" style="width: 100%;"></image>
					</swiper-item>
				</swiper>
	</view>
	</view>
	<view class="card-section">
	<view class="smart-panel-title1">泉州介绍</view>
	<view class="smart-panel-title1">海上丝绸之路起点——泉州</view>
	<view class="smart-panel-title2">泉州是联合国教科文组织认证的海上丝绸之路起点，宋元时期曾是世界第一大港，享有 “涨海声中万国商” 的盛誉。这里商船云集、货通四海，见证了中国与亚非数十国的贸易往来与文化交融。作为世界文化遗产，泉州留存的清净寺、开元寺等古迹，至今仍诉说着古代海洋文明的辉煌与中外文明互鉴的传奇。</view>
	</view>
	<view class="card-section">
	<view class="smart-panel-title1">探索进度</view>
	<view class="smart-panel-title2">当前进度:{{progress}}%</view>
	<view>
		<slider value="60" @change="sliderChange" show-value></slider>
	</view>
	</view>
	<view class="card-section">
	<view class="smart-panel-title1">选择城市</view>
	<view class="smart-panel-title1">
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">当前选择</view>
			<view class="uni-list-cell-db">
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
					<view class="uni-input">
						{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
					</view>
				</picker>
			</view>
		</view>
	</view>
	</view>
	</view>
	<view class="card-section">
	<view class="smart-panel-title1">泉州宣传</view>
	<view class="smart-padding-wrap">
		<view>
			<video id="myVideo" src="/static/city-video.mp4" @error="videoErrorCallback" controls poster="/static/music-poster.jpg"></video>
		</view>
	</view>
	</view>
	<!-- <view class="smart-panel-title1">偏好设置</view>
	<view class="">
		<view>
			<label class="" style="margin-right: 30rpx;">
				<radio value="r1" checked="true" color="#007aff" style="transform: scale(0.7)"/>公交
			</label>
			<label class="">
				<radio value="r2" color="#007aff" style="transform: scale(0.7)"/>自驾
			</label>
			<label class="">
				<radio value="r3" color="#007aff" style="transform: scale(0.7)"/>步行
			</label>
		</view>
	</view> -->
	<view class="card-section">
	  <view class="smart-panel-title1">偏好设置</view>
	  <view class="setting-section">
	  <view class="radio-group">
	    <text class="radio-label">出行方式：</text>
		<radio-group @change="handleWayChange">
	    <view class="radio-options">
	      <label class="radio-item">
	        <radio value="r1" checked="true" color="#007aff" style="transform: scale(0.7)"/>
	        <text>公交</text>
	      </label>
	      <label class="radio-item">
	        <radio value="r2" color="#007aff" style="transform: scale(0.7)"/>
	        <text>自驾</text>
	      </label>
	      <label class="radio-item">
	        <radio value="r3" color="#007aff" style="transform: scale(0.7)"/>
	        <text>步行</text>
	      </label>
	    </view>
		</radio-group>
	  </view>
	  </view>
	  <view class="switch-container">
	  <view class="uni-list-cell-db">显示推荐景点</view>
	  <switch checked />
	</view>
	<view class="smart-panel-title2">探索半径:{{progress1}}km</view>
	<view>
		<slider value="12" @change="sliderChange1" min="0" max="50"></slider>
	</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				progress:60,
				progress1:12,
				selectedWay:'公交',
				multiArray: [  // 补充多级选择器的数据源
				      ['中国', '美国'],
				      ['福建'],
				      ['泉州', '福州']
				    ],
				    multiIndex: [0, 0, 0]  // 补充选中索引
		}
	},
	onReady:function(res){
		this.videoContext = uni.createVideoContext('myVideo')
	},
		methods: {
			sliderChange(e) {
							this.progress=e.detail.value;
						},
						sliderChange1(e) {
										this.progress1=e.detail.value;
									},
									handleWayChange(e){
									  const wayMap = {
									    r1: '公交',
									    r2: '自驾',
									    r3: '步行'
									  };
									  this.selectedWay = wayMap[e.detail.value];
									  console.log('当前选中:', this.selectedWay);
									},
						 bindMultiPickerColumnChange(e) {
						    const column = e.detail.column; // 当前改变的列索引（0、1、2）
						    const value = e.detail.value;   // 当前列选中的值索引
						    this.multiIndex[column] = value; // 更新当前列的选中索引
						
						    // 根据第一列（国家）切换第二列（地区）数据
						    if (column === 0) {
						      if (value === 0) { // 选择“中国”
						        this.multiArray[1] = ['福建']; // 中国的省份
						        this.multiArray[2] = ['泉州', '福州']; // 福建的城市
						      } else { // 选择“美国”
						        this.multiArray[1] = ['加州']; // 美国的州
						        this.multiArray[2] = ['洛杉矶', '旧金山']; // 加州的城市
						      }
						      // 重置后两列的选中索引为0（避免索引越界）
						      this.multiIndex[1] = 0;
						      this.multiIndex[2] = 0;
						    }
					}
		}
	}
</script>

<style>
/* 测试 */
.qb{
	background-color: #a7a7a7;
}
.card-section {
  background-color: #ffffff; /* 卡片白底，与页面背景区分 */
  border-radius: 12rpx; /* 圆角优化视觉 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); /* 轻微阴影增强层次 */
  padding: 20rpx; /* 内边距让内容更舒展 */
  margin: 0 15rpx 20rpx 15rpx; /* 模块间的外边距，避免拥挤 */
}
.smart-panel-title1{
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 15px;
	flex-direction: row;
}
.smart-panel-title2{
	font-size: 10px;
	font-weight:normal;
	padding-top: 10px;
	padding-left: 15px;
	flex-direction: row;
}
.uni-list{
	background-color: #ffffff;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction:column;
}
.uni-list-cell{
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #bebebe;
	border-bottom: 1px solid #bebebe;
}
.uni-list-cell-db{
	flex: 1;
}
.uni-list-cell-left{
	white-space: nowrap;
	font-size: 28rpx;
	padding: 0 30rpx;
}
.uni-input{
	height: 50rpx;
	padding: 15rpx 25rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	background: #fff;
	flex:1;
}
/* 出行方式 */
.setting-section {
  padding: 0rpx 30rpx; /* 整体内边距 */
}

.smart-panel-title1 {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx; /* 标题与选项间距 */
}

.radio-group {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding: 10rpx 0;
}

.radio-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx; /* 与选项的间距 */
  white-space: nowrap; /* 防止换行 */
}

.radio-options {
  display: flex;
  gap: 40rpx; /* 选项之间的间隔 */
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8rpx; /* 单选框与文字的间距 */
  font-size: 28rpx;
  color: #333;
}

.switch-container {
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 两端对齐，文字居左，开关居右 */
  padding: 20rpx 30rpx; /* 添加上下内边距，优化整体间距 */
}
</style>
